<template>
  <div class="home-box">
    <header-search></header-search>
    <div class="home-content">
      <home-swiper></home-swiper>

      <!-- 选项卡 start-->
      <div class="tab-box">
        <div class="item"
             v-bind:class="{active:tabType==1}"
             @click="tab(1)">
          <h3>全部</h3>
          <span>猜你喜欢</span>
        </div>
        <div class="item"
             v-bind:class="{active:tabType==2}"
             @click="tab(2,'402')">
          <h3>狗粮</h3>
          <span>新品推荐</span>
        </div>
        <div class="item"
             v-bind:class="{active:tabType==3}"
             @click="tab(3,'401')">
          <h3>猫粮</h3>
          <span>热卖促销</span>
        </div>
        <div class="item"
             v-bind:class="{active:tabType==4}"
             @click="tab(4,'102')">
          <h3>其他</h3>
          <span>低价抢购</span>
        </div>
      </div>
      <!-- 选项卡 end-->

      <div class="goods-list">
        <template v-if="goodsList">
          <ul>
            <li v-for="(item,index) in goodsList"
                v-bind:key="item.Id"
                @click="jumpDetail(item)">
              <img :src="item.GoodsImage"
                   alt="">
              <p class="title">{{item.ClassifyName}}|{{item.Title}}</p>
              <p><span>￥{{item.SaleAmount}}</span> <em>￥599</em></p>
            </li>
          </ul>
        </template>
        <template v-else>
          <div></div>
        </template>

      </div>
    </div>
  </div>
</template>
<script>
import HeaderSearch from './components/HeaderSearch.vue'
import HomeSwiper from '@/components/Swiper.vue'
import Vue from 'vue';
import { Dialog } from 'vant';

// 全局注册
Vue.use(Dialog);
//第一种引入方式
// import Button from 'vant/lib/button';
// import 'vant/lib/button/style';
//第二种引入方式
// import { Button } from 'vant';
// Vue.use(Button)

export default {
  name: "home",
  data () {
    return {
      tabType: 1,
      goodsList: []
    }
  },
  created () { },
  mounted () {
    let self = this;
    // this.$toast("加载中")
    //第一种方式  将参数直接写在url中
    axios.get('https://ys.lumingx.com/api/manage/GoodsList', {
      params: {
        pageNo: 1,
        pageSize: 10
      }
    }).then(function (response) {
      //  console.log(response);
      let res = response.data;
      if (res && res.success) {
        self.goodsList = res.data;
      }

    }).catch(function (error) {
      console.log(error);
    });


    // //post请求
    // axios.post('https://ys.lumingx.com/api/manage/userLogin', {
    //   user: 'admin',
    //   password: '123456'
    // }).then((response) => {
    //   console.log(response)
    // }).catch((error) => {
    //   console.log(error)
    // })
  },
  components: {
    HeaderSearch, //es6中写法  相当于HeaderSearch:HeaderSearch
    HomeSwiper
  },
  methods: {
    tab (index, classify) {
      this.tabType = index;
      //  this.goodsList = "异步回来的数据"
      this.getGoodsList(classify)
    },
    jumpDetail (item) {
      this.$router.push({
        path: "/detail",
        query: {
          goodsNo: item.GoodsNo
        }
      })

    },
    //获取商品列表
    getGoodsList (classify) {
      let self = this;
      //classify
      axios.get('https://ys.lumingx.com/api/manage/GoodsList', {
        params: {
          pageNo: 1,
          pageSize: 10,
          classify: classify || ''
        }
      }).then(function (response) {
        let res = response.data;
        if (res && res.success) {
          self.goodsList = res.data;
        }

      }).catch(function (error) {
        console.log(error);
      });
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.home-content {
  padding: 40px 0 55px 0;
  .tab-box {
    display: flex;
    .item {
      width: 25%;
      padding: 20px 0;
      text-align: center;
      &.active {
        h3 {
          color: $main;
        }
        span {
          background: $main;
          border-radius: 15px;
          padding: 3px 10px;
          color: $white;
        }
      }
      h3 {
        font-size: 16px;
        height: 30px;
      }
      span {
        color: $lightgrey;
        font-size: 14px;
      }
    }
  }
  .goods-list {
    overflow: hidden;
    li {
      width: 45.5%;
      float: left;
      margin-left: 3%;
      margin-bottom: 10px;
      box-shadow: 0px 5px 5px $border-light;
      background: $white;
      border-radius: 10px;
      img {
        width: 100%;
        height: 170px;
        border-radius: 10px;
      }
      p {
        @include no-wrap-multi(2);
        font-size: 14px;
        padding: 3px 10px;

        &.title {
          height: 48px;
        }
        span {
          color: $main;
        }
        em {
          text-decoration: line-through;
          margin-left: 20px;
        }
      }
    }
  }
}
</style>